import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { ProTable, TableDropdown } from '@ant-design/pro-components';
import { useRef } from 'react';
import { Image } from 'antd';
import { searchUsers } from '@/services/ant-design-pro/api';

export const waitTimePromise = async (time: number = 100) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, time);
  });
};

export const waitTime = async (time: number = 100) => {
  await waitTimePromise(time);
};

//声明表格的列名
const columns: ProColumns<API.CurrentUser>[] = [
  {
    dataIndex: 'id',   //映射的具体对象的属性
    valueType: 'indexBorder',   //值的类型
    width: 48,
  },
  {
    title: '用户名',
    dataIndex: 'userName',
    copyable: true,   //允许被复制
    // ellipsis: true,   //允许缩略
  },
  {
    title: '账号',
    dataIndex: 'account',
    copyable: true,   //允许被复制
    // ellipsis: true,   //允许缩略
  },
  {
    title: '性别',
    dataIndex: 'gender',
    //0表示男生,1表示女生
    valueType: 'select',
    valueEnum: {
      0: { text: '男' },
      1: { text: '女'},
    },
  },
  {
    title: '头像',
    dataIndex: 'avatarUrl',

    /**
     * 修改渲染逻辑，默认为纯文本【数据库中的图片原链接】显示，此处修改为显示图片
     * @param _ 当前单元格中显示的目标对象的对应属性数据【avatarUrl】
     * @param record 当前所在行的要渲染的目标数据对象
     */
    render: (_,record) => (
        // <div>
        //   {a}
        //   {JSON.stringify(record)}
        // </div>

      //Ant Desgin 组件【fallback，图片容错处理，当url错误或者头像没设置时则显示该默认图片】
      <Image src={record.avatarUrl} width={100} fallback=""
      />

    ),
  },
  {
    title: '电话',
    dataIndex: 'phone',
    copyable: true,   //允许被复制
  },
  {
    title: '邮箱',
    dataIndex: 'email',
    copyable: true,   //允许被复制
  },
  {
    title: '角色',
    dataIndex: 'role',

    //0表示普通用户,1表示管理员
    valueType: 'select',
    valueEnum: {
      0: { text: '用户', status: 'Default' },
      1: { text: '管理员', status: 'Success' },
    },

  },
  {
    title: '状态',
    dataIndex: 'status',
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    valueType: 'date',   //数据类型，更好将具体时间可视化
  },

  //操作列
  {
    title: '操作',
    valueType: 'option',
    key: 'option',
    render: (text, record, _, action) => [    //record代表当前行的用户对象
      <a
        key="editable"
        onClick={() => {
          action?.startEditable?.(record.id);
        }}
      >
        编辑
      </a>,
      // @ts-ignore
      <a href={record.url} target="_blank" rel="noopener noreferrer" key="view">
        查看
      </a>,
      <TableDropdown
        key="actionGroup"
        onSelect={() => action?.reload()}
        menus={[
          { key: 'copy', name: '复制' },
          { key: 'delete', name: '删除' },
        ]}
      />,
    ],
  },
];

/**
 * 具体高级表格的实现
 * 只需要将表格每一行要渲染的数据对象传给ProTable，即可自动完成数据填充
 */
export default () => {
  const actionRef = useRef<ActionType>();
  return (
    <ProTable<API.CurrentUser>     //声明表格中每一行需要填充的数据对象
      columns={columns}
      actionRef={actionRef}
      cardBordered

      //调用后端接口：获取表格需要填充的所有用户数据
      request={async () => {

        const res = await searchUsers();  //调用api.ts中定义的获取所有用户信息接口
        //将所有用户信息回调给高级表格对象【仿源码思想，也将userList封装在data对象中，避免组件识别不到】
        return {
          data: res.data,
        };

        // return request<{
        //   data: API.CurrentUser[];
        // }>('https://proapi.azurewebsites.net/github/issues', {
        //   params,
        // });
      }}

      editable={{
        type: 'multiple',
      }}
      columnsState={{
        persistenceKey: 'pro-table-singe-demos',
        persistenceType: 'localStorage',
        defaultValue: {
          option: { fixed: 'right', disable: true },
        },
        onChange(value) {
          console.log('value: ', value);
        },
      }}
      rowKey="id"
      search={{
        labelWidth: 'auto',
      }}
      options={{
        setting: {
          // @ts-ignore
          listsHeight: 400,
        },
      }}
      form={{
        // 由于配置了 transform，提交的参数与定义的不同这里需要转化一下
        syncToUrl: (values, type) => {
          if (type === 'get') {
            return {
              ...values,
              created_at: [values.startTime, values.endTime],
            };
          }
          return values;
        },
      }}
      pagination={{
        pageSize: 5,
        onChange: (page) => console.log(page),
      }}
      dateFormatter="string"
      headerTitle="高级表格"
    />
  );
};
